<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>

		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

		<title>微光协同办公平台-会议列表</title>
		<title>微光协同办公平台-会议列表</title>
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
		<link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
		<link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
		<link th:href="@{/css/animate.css}" rel="stylesheet"/>
		<link th:href="@{/css/style.css}" rel="stylesheet"/>
	</head>

	<body onload="init()">
	<div class="col-sm-12" style="height: 30px;" ></div>
		<div class="col-sm-12">
			<!-- Example Events -->
			<div class="example-wrap">
				<div class="example">
					
					<div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
						<button type="button" class="btn btn-outline btn-default" onclick="add()">
                                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                                  </button>
						<button type="button" class="btn btn-outline btn-default" onclick="del()">
							<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
						</button>
					</div>
					<table id="exampleTableEvents" data-height="400" data-mobile-responsive="true">
						<thead>
							<tr>
								<th data-field="state" data-checkbox="true"></th>
								<th data-field="roomId">ID</th>
								<th data-field="roomUsedStart">预约开始时间</th>
								<th data-field="roomUsedEnd">预约结束</th>
								<th data-field="roomReservation">预约者</th>
								<th data-field="roomReserStatus" >预约状态</th>
								<th data-field="roomDescription" >备注事项</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<!-- End Example Events -->
		</div>

	</body>
	<!-- 全局js -->
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>

	<!-- 自定义js -->
	<script th:src="@{/js/content.js}"></script>

	<!-- Bootstrap table -->
	<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
	<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
	<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>

	<!--layer-->
	<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
	<script th:src="@{/js/jquery.form.js}"></script>
	<script th:inline="javascript">
        function init() {
            var newVar = [[${preorderList}]];
            $('#exampleTableEvents').bootstrapTable({
                data: newVar,
                search: true,
                pagination: true,
                showRefresh: true,
                height: 500,
                showToggle: true,
                showColumns: true,
                iconSize: 'outline',
                toolbar: '#exampleTableEventsToolbar',
                icons: {
                    refresh: 'glyphicon-repeat',
                    toggle: 'glyphicon-list-alt',
                    columns: 'glyphicon-list'
                }
            });
        }
	</script>
    <script>
		function add() {
            //parent.layer.open
            var count=$('input[name="btSelectItem"]:checked').length;
            if(count!=1){
                layer.msg("请选择一条信息");
                return;
			}
			var boxid=$('input[name="btSelectItem"]:checked').closest("tr").find("td:eq(1)").text();
           $.ajax({
				type:"post",
			   	url:"/addPreorder",
				data:{"Id":boxid},
			    success:function (data) {
					if(data=="成功"){
                        layer.msg("预约"+data);
                        setTimeout(function () {
                            location.reload();
                        },1000)
					}else{
					    layer.msg("预约"+data);
					}
                }

		   });
        }
        function del() {
            var count=$('input[name="btSelectItem"]:checked').length;
            var boxid=$('input[name="btSelectItem"]:checked').closest("tr").find("td:eq(1)").text();
            if(count!=1){
                layer.msg("请选择一条信息");
                return;
            }
            $.ajax({
                type:"get",
                data:{"delInfo":boxid},
                url:"/delPreorder",
                traditional:true,
                contentType:'json',
                success:function (data) {
                    if(data=="成功"){
                        layer.msg("删除预约"+data);
                        setTimeout(function () {
                            location.reload();
                        },1000)
                    }else {
                        if(data=="失败"){
                        layer.msg("删除失败,未被预约");
                        }else{
                            if(data=="非对应用户")
                                layer.msg(data);
						}
                    }
                }
            });

			
        }
	</script>

</html>